Examples of embedded SVG mashups  with
iXmaps

Guenter Richter
2011

In the following pages you will find some examples of the different ways to integrate interactive HTML5 SVG mashups created with iXmaps into arbitrary HTML pages. 

 

Embedded iXmaps Map

Definition of the map theme 

<LEGENDITEM type="theme" id="pop" name="Popolazione 1991 - 2001 (confronto)"
  icon="barchart_icon"
  onactivate="map.Api.newMapTheme('com2001_s|com2001_s-s','N6|N5','',
  'type:CHART|BAR|3D|SIZE|SPACED|SEQUENCE|TRENDLINE|SUM;
   colorscheme:#F5E4D0,#E5a93F;
   dbtable:TavPopLegaleComuniIta;
   lookupfield:N4;
   scale:2.0;',
  'Popolazione 1991-2001','1991|2001')"
/>

Embedded iXmaps Map

Embedded iXmaps Map

Autorità Bacini
Nomi Bacini

Embedded iXmaps Map

Embedded iXmaps Map

Embedded iXmaps Map

Basilicata  Abruzzo  Basilicata  Calabria  Campania  Emilia-Romagna  Friuli-Venezia Giulia  Lazio  Liguria  Lombardia  Marche  Molise  Piemonte  Puglia  Sardegna  Sicilia  Toscana  Trentino-Alto Adige  Umbria  Valle d'Aosta  Veneto 

Embedded iXmaps Json Map

Simple slide with header and text

This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text.

There is more text just underneath with a code sample: 5px.

Simple slide with header and text (small font)

This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text.

There is more text just underneath with a code sample: 5px.

Slide with bullet points and a longer title, just because we can make it longer

Slide with bullet points that builds

Any element with child nodes can build.

It doesn't have to be a list.

Slide with bullet points (small font)

Slide with a table

Name Occupation
Luke Mahé V.P. of Keepin’ It Real
Marcin Wichary The Michael Bay of Doodles

Slide with a table (smaller text)

Name Occupation
Luke Mahé V.P. of Keepin’ It Real
Marcin Wichary The Michael Bay of Doodles

Styles

Segue slide

Slide with an image

Source: Sergey Brin

Slide with an image (centered)

Source: Larry Page

Image filling the slide (with optional header)

Source: Eric Schmidt

This slide has some code 

<script type='text/javascript'>
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i >= 0;) {
      alert('Hello ' + String(world));
    }
  }
</script>
<style>
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
</style>

This slide has some code (small font) 

<script type='text/javascript'>
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i >= 0;) {
      alert('Hello ' + String(world));
    }
  }
</script>
<style>
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
</style>
The best way to predict the future is to invent it.
Alan Kay
A distributed system is one in which the failure of a computer you didn’t even know existed can render your own computer unusable.
Leslie Lamport

A slide with an embed + title

Full-slide embed with (optional) slide title on top

Thank you!